<template>
  <main>
    <!-- 左侧 -->
    <div class="left">
      <!-- 顶部导航栏 -->
      <ul class="topNav">
        <li :class="{ 'active': tag === 'recommend' }" @click="tag = 'recommend'">推荐</li>
        <li :class="{ 'active': tag === 'follow' }" @click="tag = 'follow'">关注</li>
        <li :class="{ 'active': tag === 'notice' }" @click="tag = 'notice'">公告</li>
      </ul>
      <!-- 文章列表 -->
      <template v-if="articleList.length">
        <Article v-for="(item, index) in articleList" :key="index" :list="item"></Article>
      </template>
      <template v-else>
        <div class="no-data">暂无文章</div>
      </template>
    </div>
    <!-- 右侧 -->
    <div class="right">
      <!-- 榜单 -->
      <Hot :list="hotArticleList">
        <template #title>
          综合热榜
        </template>
      </Hot>
      <!-- 其他用户 -->
      <Other />
      <!-- 广告 -->
      <aside class="address">
      </aside>
    </div>
  </main>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Article from './Article.vue';
import Hot from '@/components/Hot.vue';
import Other from './Other.vue';
import { reqGetArticleList, reqGetFollowArticleList, reqGetHotArticleList } from '@/apis/passage';
import userStore from '@/stores/modules/user';

// 文章列表
let articleList = ref([])
// 热门文章列表
let hotArticleList = ref([])
// 标签
let tag = ref('recommend')
onMounted(() => {
  getArticle()
  getHotArticle()
})

watch(tag, (newVal) => {
  if (newVal === 'recommend') {
    getArticle()
  } else if (newVal === 'follow') {
    getFollowArticle()
  } else if (newVal === 'notice') {
    articleList.value = []
  }
})

// 获取文章列表(随机)
const getArticle = async () => {
  let res = await reqGetArticleList(userStore().userId)
  if (res.code === 200) {
    articleList.value = res.data
  } else {
    console.log('获取文章列表失败:', res.msg);
  }
}

// 获取关注文章列表
const getFollowArticle = async () => {
  let res = await reqGetFollowArticleList(userStore().userId)
  if (res.code === 200) {
    articleList.value = res.data
  } else {
    console.log('获取关注文章列表失败:', res.msg);
  }
}

// 获取文章榜单
const getHotArticle = async () => {
  let res = await reqGetHotArticleList(5)
  if (res.code === 200) {
    hotArticleList.value = res.data
  } else {
    console.log('获取文章榜单失败:', res.msg);
  }
}
</script>

<style lang="scss" scoped>
main {
  display: flex;
  justify-content: center;
  background-color: #fff;
  margin: auto;
  margin-top: .1667rem;
  width: 23rem;

  // 左侧
  .left {
    padding: .5rem .6667rem;
    width: 14.6667rem;

    // 顶部导航栏
    .topNav {
      display: flex;
      border-bottom: .0167rem solid #999;
      margin-bottom: .25rem;
      height: .5rem;

      li {
        margin-right: .75rem;
        font-size: .3667rem;
        cursor: pointer;
      }

      .active {
        font-weight: bold;
        color: #654321;
      }
    }

    .no-data {
      margin-top: .5rem;
      font-size: .4rem;
      text-align: center;
      color: #999;
    }
  }

  // 右侧
  .right {
    position: sticky;
    top: 2rem;
    padding: .5rem .3333rem;
    width: 6.6333rem;
    height: 5rem;

    // 广告
    aside {
      // background-color: #eee;
      margin-top: .5rem;
      width: 5.8333rem;
      height: 2.3rem;
      font-size: .3333rem;
      background: url('@/assets/ads.jpg') no-repeat;
      background-size: contain;
    }
  }
}
</style>